<template>
    <div>
        <h2>这里是用户界面</h2>
        <h4>params->我是 {{id}}</h4>
        <h4>query->{{$route.query.id}}  我是 {{$route.query.name}}</h4>
        <button @click="logRoute">查看$route</button>
    </div>
</template>

<script>
  export default {
    name: "User",
    computed: {
      id() {
        // this.$route 是被激活的路由对象
        return this.$route.params.id;
      }
    },
    methods: {
      logRoute() {
        // 所有组件继承自 Vue 的原型
        console.log(this.$router); // 就是 main.js 里面的 router
        console.log(this.$route); // 当前激活的路由
      }
    },
    created() {
      console.log('user created');
    },
    destroyed() {
      console.log('user destroyed');
    }
  }
</script>

<style scoped>

</style>
